<template>
  <div>
    <!-- 样式绑定 -->
    <div
      :style="{ 'background-color': pink, width: width, height: height + 'px' }"
    ></div>
    <!-- 三元运算 -->
    <div
      :style="{
        backgroundColor: isBlue ? blue : 'black',
        width: '50px',
        height: '20px',
      }"
    ></div>
    <!-- 绑定样式对象 -->
    <div :style="myDiv"></div>

    <!-- 使用数组 -->
    <div v-bind:style="[activeClass, borderClass]"></div>
    <!-- 使用三元表达式 -->
    <div v-bind:style="[isActive ? activeClass : '', borderClass]"></div>
    <!-- 数组语法中使用对象语法 -->
    <div
      v-bind:style="[
        { backgroundColor: 'rgb(59, 192, 241)', height: '10px' },
        borderClass,
      ]"
    ></div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
const isBlue = ref(false);
const blue = ref("blue");
const pink = ref("pink");
const width = ref("200px");
const height = ref(200);
const myDiv = reactive({
  backgroundColor: "red",
  width: "200px",
  height: "200px",
});

const isActive = ref(true);
const activeClass = reactive({
  height: "10px",
  backgroundColor: "rgb(59, 192, 241)",
});
const borderClass = reactive({
  border: "2px solid rgb(0, 0, 0)",
});
</script>

<style lang="scss" scoped></style>
